<template>
  <div 
    :class="[
      'cursor-pointer hover:bg-gray-50 p-4 border-b border-gray-100 transition-colors',
      active ? 'bg-blue-50 border-l-4 border-l-primary' : ''
    ]"
    @click="$emit('click')"
  >
    <div class="flex">
      <div class="relative w-12 h-12 rounded-full overflow-hidden mr-3 flex-shrink-0">
        <img :src="avatarUrl" :alt="displayName" class="w-full h-full object-cover">
        <div v-if="conversation.unreadCount > 0" class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
          {{ conversation.unreadCount }}
        </div>
      </div>
      <div class="flex-1 min-w-0">
        <div class="flex justify-between items-start mb-1">
          <div class="font-medium text-gray-800 truncate">{{ displayName }}</div>
          <div class="text-xs text-gray-400 flex-shrink-0 ml-2">{{ conversation.lastMessage.timestamp }}</div>
        </div>
        <div class="text-sm text-gray-500 mb-1 truncate">{{ jobTitle }}</div>
        <div class="text-sm text-gray-600 truncate">{{ conversation.lastMessage.content }}</div>
        <div v-if="tags.length > 0" class="flex flex-wrap gap-1 mt-2">
          <span 
            v-for="tag in tags"
            :key="tag"
            class="px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded"
          >
            {{ tag }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Conversation } from '../types'

interface Props {
  conversation: Conversation
  active?: boolean
}

const props = defineProps<Props>()
defineEmits<{
  click: []
}>()

// Mock data for display
const displayName = computed(() => {
  if (props.conversation.lastMessage.type === 'system') {
    return '系统通知'
  }
  return '张小明'
})

const jobTitle = computed(() => {
  if (props.conversation.lastMessage.type === 'system') {
    return ''
  }
  return '应聘：高级产品经理'
})

const avatarUrl = computed(() => '/placeholder.svg?height=100&width=100')

const tags = computed(() => {
  const result = []
  if (props.conversation.unreadCount > 0) {
    result.push('未读')
  }
  if (Math.random() > 0.5) {
    result.push('面试')
  }
  return result
})
</script>
